<!--
 * @Author: your name
 * @Date: 2021-08-05 16:26:50
 * @LastEditTime: 2021-08-08 20:20:49
 * @LastEditors: luojie
 * @Description: In User Settings Edit
 * @FilePath: /szjzglfxgl/src/packageAlpha/pages/environmentalMonitoring/index.vue
-->
<template>
  <view class="container">
    <view class="date-wrapper">
      <picker
        mode="date"
        :end="endDate"
        :value="begin"
        @change="bindDateChange"
        fields='month'
      >
        <view class="date-show"
          >{{ begin ? begin : '请选择日期' }}
          <image
            class="arrow-icon"
            src="https://szgd-dev.tgovcloud.com/public/images/arr-down.png"
            mode="widthFix"
          ></image>
        </view>
      </picker>
    </view>
    <scroll-view
      class="list"
      scroll-y="true"
      lower-threshold="50"
      @scrolltolower="scrolltolower"
    >
    <view class="wrap">
        <view
          v-for="i in list"
          :key="i.hotelSampleId"
          class="item"
          @click="toDtl(i)"
        >
          <view class="row-state" :class="{ active: i.checkResult=='阳性' }">{{i.checkResult}}</view>
          <view class="row1">{{ i.checkTime | formatTm }}检测结果</view>
          <view class="row2"
            >采集{{ i.number }}个采样点，
            <text v-if="i.isPositive">检测结果出现阳性</text>
            <text v-else>检查结果均为阴性</text>
          </view>
          <view class="row3">核酸采集时间：{{ i.sampleTime | formatTm2 }} </view>
        </view>
        <view class="no-more">{{tipsTxt}}</view>
    </view>
    </scroll-view>
  </view>
</template>

<script type="text/ecmascript-6">

import {getData} from '@/api';
import moment from 'moment'
export default {

name: '',

data () {
  return {
    endDate: '',
    pageNum: 1,
    size: 10,
    begin: '',
    hotelId: '',
    list:[],
    finished: false,
    tipsTxt: '暂无数据',
  }
},

props: {},

created () {

},

filters: {
  formatTm(val){
    if(val){
      return moment(val).format('YYYY年MM月DD日')
    }
  },
  formatTm2(val){
    if(val){
      return moment(val).format('YYYY-MM-DD')
    }
  },
},

mounted () {
},

onLoad(){
  // this.initDate();
  this.search();
},

methods: {
  initDate(){
    let D=new Date();
    let y,m,d;
    y=D.getFullYear();
    m=D.getMonth()+1;
    d=D.getDate();
    m=m<10?'0'+m : m;
    d=d<10?'0'+d:d;
    this.begin=`${y}-${m}-${d}`;
    this.endDate=this.begin;
  },

  scrolltolower(){
    if(this.finished) return;
    console.log('====触底======')
    this.pageNum++;
    this.search();
  },

  bindDateChange(e){
    console.log(e)
    this.begin=e.detail.value;
    this.pageNum=1;
    this.finished=false;
    this.list=[];
    this.search();
  },

  toDtl(row){
    uni.setStorageSync('environSample', row);
    uni.navigateTo({
      url: `./detail?id=${row}`
    })
  },

  search(){
    let begin,end,date=moment();
    if(this.begin){
      begin=moment(this.begin).format('YYYY-MM')+'-01 00:00:00';
      if(moment(this.begin).month()==date.month()){
        // 同月
        end=moment().format('YYYY-MM-DD HH:mm:ss');
      }else {
        end=moment(this.begin).endOf('month').format("YYYY-MM-DD")+ ' 23:59:59';
      }
    }
    let params={
      begin ,
      end,
      hotelId: uni.getStorageSync('hotelId'),
      pageNum: this.pageNum,
      size: this.size,
    }
    getData('samplePage', 'post', params).then(data => {

      let arr=data.records||[];
      arr.forEach(row => {
        if(row.details.length) {
          this.$set(row,'isPositive',row.details.some(ele => {
            return ele.nucleicResult=='阳性';
          }))
        }
      })
      this.list=[...this.list, ...arr];
      if(this.list.length==data.total) {
        this.finished=true;
        this.tipsTxt='没有更多数据';
      }else {
        this.tipsTxt='加载更多'
      }
    })
  },

  

},

components: { },

watch: {}

}
</script>

<style scoped lang="scss">
.container {
  background: #f9f9f9;
  height: 100vh;
  .date-wrapper {
    overflow: hidden;
    padding-top: 30rpx;
    padding-right: 32rpx;
    .date-show {
      height: 56rpx;
      width: 224rpx;
      background-color: #fff;
      border-radius: 6rpx;
      border: 1px solid #2c9af1;
      float: right;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      font-family: PingFang SC;
      font-weight: 600;
      color: #000000;
      padding: 12rpx 30rpx;
      box-sizing:border-box;
      .arrow-icon {
        display: inline-block;
        width: 16rpx;
        margin-left: 20rpx;
      }
    }
  }
  .list {
    height: calc(100% - 52px);
    // height: 100vh;
    // overflow-y: scroll;
    .item {
      margin-top: 22rpx;
      padding: 16rpx 32rpx;
      border: 1px solid #eaeaea;
      border-radius: 16rpx;
      margin-left: 32rpx;
      margin-right: 32rpx;
      box-shadow: 0px 8px 20px #e5e5e5;
      background-color: #fff;
      height: 284rpx;
      position: relative;
      box-sizing: border-box;
      .row1 {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #000000;
        margin-bottom: 36rpx;
        height: 60rpx;
        line-height: 60rpx;
      }
      .row2 {
        height: 48rpx;
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 48rpx;
        color: #666666;
        margin-bottom: 32rpx;
      }
      .row3 {
        height: 48rpx;
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        opacity: 1;
      }
      .row-state {
        height: 60rpx;
        width: 180rpx;
        border: 1rpx solid #13c563;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 32rpx;
      }
      .active {
        border-color: #f15b53;
        color: #f15b53;
      }
    }
  }
  .no-more{
      color: #999999;
      font-size: 30rpx;
      margin: 20rpx 0;
      text-align: center;
      height: 80rpx;
    }
}
</style>
